<template>
	<el-header>
		<el-breadcrumb>
			{{getRoutName}}
		</el-breadcrumb>
		<div class="right-box">
			<div class="true-name">
				{{getUserInfo.loginname}}
			</div>
			<img :src="getUserInfo.userAvatar" />
			<el-badge is-dot class="item" hidden>
				<i class="iconfont iconxiaoxitongzhi" title="消息通知"></i>
			</el-badge>
			<i class="iconfont iconshezhi2" title="设置"></i>
			<i class="iconfont icontuichu" @click="doLogout" title="退出"></i>
		</div>
	</el-header>
</template>

<script>
	import defaultHead from "img/default_head.png"
	import {
		clearLocalData
	} from "@/common/utils"
	import {
		mapActions
	} from "vuex"
	export default {
		mounted() {
			console.log(this.$store.state.user.userInfo)
			console.log(this.getRoutName)
		},
		data() {
			return {
				userName: "张三",
				userAvatar: defaultHead
			}
		},
		computed: {
			getUserInfo() {
				let userInfo = this.$store.state.user.userInfo;
				if (!userInfo.userAvatar) {
					userInfo.userAvatar = require("@/assets/img/default_head.png")
				}
				return userInfo
			},
			getRoutName() {
				let meta = this.$route.meta;
				let bread = "";
				if (meta.fatherTitle) {
					bread += meta.fatherTitle;
					if (meta.title) {
						bread += " > " + meta.title;
					}
				} else {
					bread = meta.title;
				}
				return bread;
			},
		},
		methods: {
			doLogout() {
				this.logout();
			},
			...mapActions("user", ["logout"])
		}
	}
</script>
<style lang="scss" scoped="scoped">
	.el-header {
		padding: 0;
		height: 80px !important;
		background: #FFFFFF;
		box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.05);
		@include flex-row(space-between, center);

		.el-breadcrumb {
			color: #000000;
			height: 80px;
			line-height: 80px;
			text-align: left;
			box-sizing: border-box;
			padding-left: 24px;
			font-size: 20px;
		}

		.right-box {
			margin-right: 40px;
			@include flex-row(flex-start, center);

			.true-name {
				font-size: 12px;
				font-family: PingFang SC;
				margin-right: 16px;
			}

			img {
				width: 38px;
				height: 38px;
				border-radius: 50%;
			}

			i {
				color: #C8CFD9;
				font-size: 18px;
				cursor: pointer;
				margin-left: 16px;
			}

		}
	}
</style>
